import { reactive } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { FormSchema } from '/@/components/Table';

import { BTN_EVENT_TYPE, BTN_POSITION } from '../model';
import {
  BtnTypeList,
  BtnShapeList,
  RetractList,
  JSCommentForBtn,
  JSCommentForFormBtn,
  JSCommentForBtnOnClick,
  JSCommentForFormBtnOnClick,
} from './consts';
import { MODE } from '/@/components/CodeEditor';

import { verify } from '/@/utils/validator';
import { DICT } from '/@/enums/dict';
import { getDictTypeListApi } from '/@/api/admin/dict';
import { MODEL_TYPE, getModelAllListApi } from '/@/api/config-center/model-design';
import { getOptionsResource } from '/@/api/admin/resoure';

const formModuleParam = reactive({ classify: MODEL_TYPE.FORM, modelName: '' });
const apiCodeParams = reactive({ code: '', classify: 0 });

const isCustomApiEventType = (code) =>
  [BTN_EVENT_TYPE.CUSTOM, BTN_EVENT_TYPE.IMPORT, BTN_EVENT_TYPE.CUSTOMCOMPONENT].includes(code);
// // 默认的新增、编辑按钮配置弹框类型
// const isDialogType = (code) =>
//   [
//     BTN_EVENT_TYPE.ADD,
//     BTN_EVENT_TYPE.EDIT,
//     BTN_EVENT_TYPE.FLOWADD,
//     BTN_EVENT_TYPE.FLOWCHCEK,
//   ].includes(code);
// 默认的新增、编辑按钮配置弹框类型

// 页面接口
const showPageAPI = (code) => {
  return [BTN_EVENT_TYPE.CUSTOM].includes(code);
};

const isShowModalConfrim = (code) => {
  return [
    BTN_EVENT_TYPE.DELETE,
    BTN_EVENT_TYPE.FLOWDELETE,
    BTN_EVENT_TYPE.FLOWHANDROUNDDELETE,
  ].includes(code);
};

const showCompAndModel = (code) => {
  return [
    BTN_EVENT_TYPE.ADD,
    BTN_EVENT_TYPE.EDIT,
    BTN_EVENT_TYPE.DETAIL,
    BTN_EVENT_TYPE.CUSTOMCOMPONENT,
  ].includes(code);
};

const showApiCode = (code) => {
  return [BTN_EVENT_TYPE.CUSTOM, BTN_EVENT_TYPE.IMPORT].includes(code);
};

const isExportFile = (code) => {
  return [BTN_EVENT_TYPE.EXPORTFILE].includes(code);
};
export const buttonsSchema = function (classify: MODEL_TYPE): FormSchema[] {
  const eventType =
    classify === MODEL_TYPE.FORM ? DICT.MODEL_FORM_EVENT_TYPE : DICT.MODEL_EVENT_TYPE;

  const items: FormSchema[] = [
    {
      field: 'label',
      label: '名称',
      required: true,
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
    },
    {
      field: 'btnText',
      label: '按钮文本',
      component: 'Input',
      componentProps: {
        placeholder: '请输入按钮文本',
      },
    },

    // {
    //   field: 'businessType',
    //   label: '业务类型',
    //   component: 'ApiSelect',
    //   componentProps: {
    //     api: getDictTypeListApi,
    //     allowClear: true,
    //     labelField: 'label',
    //     valueField: 'value',
    //     placeholder: '请选择业务类型',
    //     params: {
    //       type: DICT.MODEL_BUSINESS_TYPE,
    //     },
    //     getPopupContainer: () => document.body,
    //   },
    // },
    {
      field: 'location',
      label: '按钮位置',
      required: false,
      component: 'ApiSelect',
      defaultValue: 1,
      componentProps: {
        api: getDictTypeListApi,
        allowClear: false,
        labelField: 'label',
        valueField: 'intValue',
        placeholder: '请选择按钮位置',
        params: {
          type: DICT.TABLE_BTN_LOCATION,
        },
        getPopupContainer: () => document.body,
      },
      ifShow: () => classify === MODEL_TYPE.LIST,
    },
    {
      field: 'code',
      label: '权限标识',
      component: 'Input',
      rules: [
        {
          pattern: verify.upperAndLowerNum.value,
          message: '仅支持大小写字母、数字、-',
          trigger: 'change',
        },
      ],
      componentProps: {
        placeholder: '请输入权限标识',
      },
    },

    {
      field: 'type',
      label: '按钮类型',
      required: false,
      component: 'Select',
      defaultValue: 'link',
      componentProps: {
        options: BtnTypeList,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'shape',
      label: '按钮形状',
      required: false,
      component: 'Select',
      defaultValue: 'default',
      componentProps: {
        options: BtnShapeList,
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'icon',
      label: '图标',
      required: false,
      component: 'IconPicker',
      componentProps: {
        placeholder: '请选择图标',
      },
    },
    {
      field: 'retractType',
      label: '是否收起',
      required: false,
      defaultValue: 0,
      component: 'RadioGroup',
      ifShow: ({ values }) => values.location === BTN_POSITION.CENTER_RIGHT,
      componentProps: {
        options: RetractList,

        getPopupContainer: () => document.body,
      },
    },

    // primary

    {
      field: 'divider',
      label: '',
      component: 'Divider',
      colProps: { span: 24, lg: 24, md: 24 },
    },
    {
      field: 'eventType',
      label: '事件类型',
      required: true,
      component: 'ApiSelect',
      componentProps: {
        api: getDictTypeListApi,
        labelField: 'label',
        valueField: 'value',
        placeholder: '请选择事件类型',
        params: {
          type: eventType,
        },
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'dynamicParams',
      label: '动态入参取值',
      component: 'Input',
      componentProps: {
        placeholder: '多参数请以逗号隔开,例：file,file1,file2',
      },
      // ifShow: ({ values }) => isExportFile(values.eventType),
    },
    {
      field: 'deleteDialogType',
      label: '提示类型',
      required: true,
      component: 'Select',
      componentProps: {
        options: [
          { label: '弱提示', value: 0 },
          { label: '强提示', value: 1 },
        ],
      },
      ifShow: ({ values }) => isShowModalConfrim(values.eventType),
    },
    {
      field: 'confirmMsg',
      label: '提示文本',
      required: false,
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入文本内容',
      },
      ifShow: ({ values }) => isShowModalConfrim(values.eventType),
      colProps: { span: 24, lg: 22 },
    },
    {
      field: 'api',
      label: '页面接口',
      required: ({ values }) => !!values.method,
      component: 'Input',
      componentProps: {
        placeholder: '请输入页面接口',
      },
      ifShow: ({ values }) => showPageAPI(values.eventType),
      colProps: { span: 24 },
    },
    {
      field: 'apiCode',
      label: '资源编码',
      component: 'ApiSelect',
      componentProps: {
        fieldNames: {
          label: 'name',
          value: 'code',
        },
        api: async (params) => {
          const ret = await getOptionsResource(params);
          ret.forEach((e) => {
            e.connName = `${e.connName} (${e.connCode})`;
          });
          return ret;
        },
        filterOption: false,
        showSearch: true,
        params: apiCodeParams,
        onSearch: useDebounceFn((v) => {
          apiCodeParams.code = v;
        }, 200),
        getPopupContainer: () => document.body,
      },
      colProps: { span: 8 },
      ifShow: ({ values }) => {
        return showApiCode(values.eventType);
      },
    },

    // {
    //   field: 'method',
    //   label: '请求方式',
    //   required: false,
    //   component: 'ApiSelect',
    //   ifShow: ({ values }) => {
    //     return (
    //       classify === MODEL_TYPE.LIST &&
    //       isCustomApiEventType(values.eventType) &&
    //       !isExportFile(values.eventType)
    //     );
    //   },
    //   componentProps: {
    //     api: getDictTypeListApi,
    //     labelField: 'label',
    //     valueField: 'value',
    //     placeholder: '请选择请求方式',
    //     params: {
    //       type: DICT.HTTP_METHOD,
    //     },
    //     getPopupContainer: () => document.body,
    //   },
    // },
    {
      field: 'componentName',
      label: '组件名称(路径)',
      required: ({ values }) => values.eventType === BTN_EVENT_TYPE.CUSTOMCOMPONENT,
      component: 'Input',
      ifShow: ({ values }) => showCompAndModel(values.eventType),
    },
    {
      field: 'modelClassify',
      label: '模型类型',
      ifShow: ({ values }) => showCompAndModel(values.eventType),
      component: 'ApiSelect',
      componentProps({ formModel }) {
        return {
          allowClear: true,
          api: getDictTypeListApi,
          labelField: 'label',
          valueField: 'intValue',
          placeholder: '请选择模型类型',
          params: {
            type: DICT.MODEL_CLASSIFY,
          },
          onChange(v) {
            formModuleParam.classify = v;

            if (formModel.dataModelId) {
              formModel.dataModelId = undefined;
            }
          },
          getPopupContainer: () => document.body,
        };
      },
    },

    {
      required: true,
      field: 'dataModelId',
      label: '模型',
      component: 'ApiSelect',
      ifShow: ({ values }) => values.modelClassify && showCompAndModel(values.eventType),
      componentProps() {
        return {
          showSearch: true,
          filterOption: false,
          api: getModelAllListApi,
          labelField: 'modelName',
          valueField: 'modelId',
          params: formModuleParam,
          onSearch: useDebounceFn((v) => {
            formModuleParam.modelName = v;
          }, 200),
          getPopupContainer: () => document.body,
        };
      },
      // ifShow: () => classify === MODEL_TYPE.LIST,
    },
    {
      field: 'dialogType',
      label: '弹框类型',
      required: ({ values }) => values.eventType === BTN_EVENT_TYPE.CUSTOMCOMPONENT,
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '弹出式',
            value: 'modal',
          },
          {
            label: '抽屉式',
            value: 'drawer',
          },
          // {
          //   label: '页面式',
          //   value: 'page',
          // },
          {
            label: '详情',
            value: 'detail',
          },
          {
            label: '自定义',
            value: 'custom',
          },
        ],
        getPopupContainer: () => document.body,
      },
      ifShow: ({ values }) => showCompAndModel(values.eventType),
    },
    {
      field: 'width',
      label: '弹框宽度',
      required: false,
      component: 'Input',
      componentProps: {},
      ifShow: ({ values }) => {
        return values.dialogType && showCompAndModel(values.eventType);
      },
    },
    {
      field: 'placement',
      label: '抽屉方向',
      required: false,
      component: 'Select',
      defaultValue: 'right',
      componentProps: {
        options: [
          { label: '右', value: 'right' },
          { label: '左', value: 'left' },
          { label: '顶部', value: 'top' },
          { label: '底部', value: 'bottom' },
        ],
      },
      ifShow: ({ values }) => values.dialogType === 'drawer',
    },
    {
      field: 'params',
      label: '接口参数',
      component: 'InputTextArea',
      ifShow: ({ values }) =>
        isCustomApiEventType(values.eventType) || isExportFile(values.eventType),
      componentProps: {
        rows: 4,
        placeholder: '请输入接口参数',
      },
      colProps: { span: 24, lg: 22 },
    },
    {
      field: 'function',
      label: '自定义函数',
      component: 'ButtonCodeEditor',
      helpAfter: true,
      helpMessage:
        classify === MODEL_TYPE.LIST ? JSCommentForBtnOnClick : JSCommentForFormBtnOnClick,
      ifShow: ({ values }) => {
        return showApiCode(values.eventType);
      },
      componentProps: {
        mode: MODE.JS,
      },
      colProps: { span: 24, lg: 22 },
    },
    {
      field: 'visibleExpression',
      label: '隐藏表达式',
      component: 'ButtonCodeEditor',
      helpAfter: true,
      helpMessage: classify === MODEL_TYPE.LIST ? JSCommentForBtn : JSCommentForFormBtn,
      defaultValue: '',
      componentProps: {
        mode: MODE.JS,
      },
      colProps: { span: 24, lg: 22 },
    },
    {
      field: 'remark',
      label: '备注',
      component: 'InputTextArea',
      componentProps: {
        rows: 4,
        placeholder: '请输入备注',
      },
      colProps: { span: 24, lg: 22 },
    },
  ];
  return items;
};
